<template>
	<view class="retrievalStyle">
		<view class="information">
			<uni-section title="出库信息" type="line">
				<uni-list :border="false">
					<uni-list-item :border="false" showArrow title="仓库">
						<template v-slot:footer>
							<custom-tree-select
								linkage
								clearable
								search
								dataLabel="text"
								dataValue="value"
								:listData="listData"
								:disabledList="[6]"
								v-model="selected"
							></custom-tree-select>
						</template>
					</uni-list-item>
					<uni-list-item :border="false" showArrow title="类型">
						<template v-slot:footer>
							<custom-tree-select
								linkage
								clearable
								search
								dataLabel="text"
								dataValue="value"
								:listData="listDataTow"
								:disabledList="[6]"
								v-model="selectedTow"
							></custom-tree-select>
						</template>
					</uni-list-item>
					<uni-list-item :border="false" showArrow title="操作人" :rightText="$store.state.user.name" />
				</uni-list>
			</uni-section>
		</view>

		<view class="information">
			<uni-section title="物品信息" type="line"></uni-section>
			<view class="article" @click="articleBtnOK">
				<u-icon name="plus" color="#a0a2a4" size="28"></u-icon>
			</view>
			<view class="" v-if="byStoreListTow.length > 0">
				<u-swipe-action>
					<u-swipe-action-item @click="swipeBtnOK(index)" :options="swipeOptions" v-for="(item, index) in byStoreListTow" :key="index">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content">
								<view class="articleShow_action">
									<view class="articleShow_textFlex">
										<image style="height: 30rpx; width: 40rpx" src="../../../static/mappages/outbound/qc.png" mode=""></image>
										<view>{{ item.goodsKind_dictText || '- -' }}</view>
										<view>{{ item.goodsName || '- -' }}</view>
										<view>{{ item.goodsNo || '- -' }}</view>
									</view>
									<view style="margin-top: 20rpx" class="articleShow_actionflex">
										<view>数量</view>
										<view class="colorText">
											<uni-number-box v-model="item.outNumTow" @change="changeValue(index, $event)" />
										</view>
									</view>
									<view class="articleShow_actionflex">
										<uni-section title="存放位置"></uni-section>
										<u--textarea v-model="item.wz" border="none" placeholder="请输入..."></u--textarea>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>

		<view class="information">
			<uni-section title="备注" type="line"></uni-section>
			<u--textarea v-model="Inspection" border="none" placeholder="请输入..."></u--textarea>
		</view>
		<view class="information">
			<uni-section title="附件" type="line">
				<view class="example-body">
					<uni-file-picker limit="9" title="" mode="grid" @select="select" @progress="progress" @success="success" @fail="fail"></uni-file-picker>
				</view>
			</uni-section>
		</view>
		<view class="popup_style">
			<button style="background-color: #d0e1fd; color: #2e87ff" class="popup_buttom" type="submit">扫码添加</button>
			<button class="popup_buttom" @click="disposalBtnOK" type="submit">确认出库</button>
		</view>
		<u-popup :show="articleShow" @close="articleClose" @open="articleOpen">
			<view class="articleShow_style">
				<view class="articleShow_title">添加物资</view>
				<view class="topSearch">
					<u-search placeholder="请输入物资名称" v-model="storeList" :animation="false" :showAction="false" @blur="onBlurSearch" @clear="onClearBtnOK"></u-search>
				</view>
				<view class="articleShow_flex" @click="storeBtnOK(item)" v-for="(item, index) in byStoreList" :key="index">
					<view class="articleShow_text">
						<view class="articleShow_textFlex">
							<image style="height: 30rpx; width: 40rpx" src="../../../static/mappages/outbound/qc.png" mode=""></image>
							<view>{{ item.goodsKind_dictText || '- -' }}</view>
							<view>{{ item.goodsName || '- -' }}</view>
							<view>{{ item.goodsNo || '- -' }}</view>
						</view>
						<view class="articleShow_textFlex">
							<view class="colorBorder">规格</view>
							<view class="colorText">{{ item.goodsNorms || '- -' }}</view>
						</view>
					</view>
					<view style="margin-right: 22rpx">
						<u-icon name="arrow-right" color="#bdbfc1" size="24"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

		<u-loading-page :loading="retrieval" loading-text="提交中..."></u-loading-page>
	</view>
</template>

<script>
import { getGoodsList, getByStore, postAddInfo } from '@/api/mappages/warehousing/warehousing.js';
import { errorToShow, redirectTo, successToShow } from '@/common/common.js';
import { uploadImage } from '@/api/system/user.js';
export default {
	data() {
		return {
			retrieval: false,
			Inspection: '',
			checked: '',
			selected: '',
			selectedTow: '',
			storeList: '',
			articleShow: false,
			swipeOptions: [
				{
					text: '删除',
					style: {
						backgroundColor: 'red',
						color: 'white'
					},
					icon: 'trash' // 使用 u-icon 组件中的图标名
				}
			],
			listData: [],
			listDataTow: [
				{
					value: 1,
					text: '采购入库',
					children: []
				},
				{
					value: 2,
					text: '归还入库',
					children: []
				},
				{
					value: 3,
					text: '调度入库',
					children: []
				}
			],
			byStoreList: [],
			byStoreListTow: [],
			ImageFile: []
		};
	},
	mounted() {
		this.isOK();
		this.byStore();
	},
	methods: {
		storeBtnOK(item) {
			console.log(item, '222222222');
			this.articleShow = false;
			this.byStoreListTow.push({
				...item,
				outNumTow: 1
			});
		},
		async isOK() {
			let arr = await getGoodsList();
			if (arr.result.records.length > 0) {
				this.listData = arr.result.records.map((r) => {
					return {
						value: r.id,
						text: r.storeName,
						children: []
					};
				});
			}
		},
		async byStore() {
			let arr = await getByStore(this.storeList);
			console.log(arr, '22');
			if (arr.result.records.length > 0) {
				this.byStoreList = arr.result.records;
			}
			console.log(this.byStoreList, 'getByStoregetByStoregetByStoregetByStore');
		},
		articleBtnOK() {
			this.articleShow = true;
		},
		articleClose() {
			this.articleShow = false;
		},
		articleOpen() {},
		changeValue(index, event) {
			const newValue = event;
			this.$set(this.byStoreListTow, index, {
				...this.byStoreListTow[index],
				outNumTow: newValue
			});
			console.log(this.byStoreListTow, 'byStoreListTow');
		},
		// changeValue(value) {
		// 	value.outNum += 1;
		// 	console.log('返回数值：', value);
		// },
		swipeBtnOK(index) {
			// 删除指定索引的项
			this.byStoreListTow.splice(index, 1);
		},
		onBlurSearch() {
			this.byStoreList = [];
			this.byStore();
		},
		onClearBtnOK() {
			this.byStoreList = [];
			this.byStore();
		},
		//操作失败的提示信息
		errorToShow(msg = '操作失败', callback = function () {}) {
			setTimeout(function () {
				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 2000,
					success() {
						setTimeout(function () {
							callback();
						}, 2000);
					}
				});
			}, 100);
		},
		disposalBtnOK() {
			if (!this.selected.length) return errorToShow('请选择仓库');
			if (!this.selectedTow.length) return errorToShow('请选择类型');
			if (!this.byStoreListTow.length) return errorToShow('请选择物品信息');
			this.retrieval = true;
			let brr = this.byStoreListTow.map((r) => {
				return {
					wz: r.wz,
					goodsKind: r.goodsKind,
					goodsId: r.id,
					goodsName: r.goodsName,
					goodsNorms: r.goodsNorms,
					meterUnit: r.meterUnit,
					inNum: r.outNumTow
				};
			});

			let arr = {
				storeName: this.selected[0],
				inTypeCode: this.selectedTow[0],
				goodsInBy: this.$store.state.user.name,
				goodsInRemarks: this.Inspection,
				goodsStoreDetailRelevList: brr,
				inTime: this.$common.timeToDate(new Date().getTime()) //入库日期
				// goodsFile: this.ImageFile
			};

			postAddInfo(arr)
				.then((res) => {
					if (res.success) {
						successToShow('入库成功');
						redirectTo('/mappages/warehousing/warehousing');
					} else {
						this.retrieval = false;
						errorToShow(rulse.message);
					}
				})
				.catch((err) => {
					this.retrieval = false;
				});
		},
		// 获取上传状态
		async select(e) {
			const formData = new FormData();
			formData.append('file', e.tempFiles[0].file);
			let arr = await uploadImage(formData);
			console.log('选择文件：', e);
			console.log('arr：', arr);
			console.log('选择文件：', this.ImageFile);
		},
		// 获取上传进度
		progress(e) {
			console.log('上传进度：', e);
		},

		// 上传成功
		success(e) {
			console.log('上传成功');
		},

		// 上传失败
		fail(e) {
			console.log('上传失败：', e);
		}
	}
};
</script>

<style scoped lang="scss">
/deep/ .uni-list-item__container {
	padding: 10rpx 30rpx;
}
// .retrievalStyle {
// }

.colorBorder {
	color: #ff6600;
	padding: 5rpx 30rpx;
	border-radius: 50rpx;
	background-color: rgba(253, 148, 67, 0.2);
}

.colorText {
	color: #666666;
}

.articleShow_text {
	height: 150rpx;
	margin: 10rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
}
.information {
	padding: 20rpx;
	background-color: #fff;
	margin: 20rpx;
	border-radius: 20rpx;
}

.article {
	width: 100%;
	height: 200rpx;
	border-radius: 22rpx;
	background-color: rgba(160, 162, 164, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
}

.articleShow_style {
	height: 50vh;
	overflow: auto;
	padding: 20rpx;
}

.articleShow_title {
	text-align: center;
	padding: 10rpx;
	font-weight: bold;
	font-size: 28rpx;
}

.articleShow_textFlex {
	display: flex;
	align-items: center;
}
.articleShow_textFlex view {
	margin-left: 20rpx;
	font-weight: bold;
}

.articleShow_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 150rpx;
	background: rgba(160, 162, 164, 0.1);
	margin: 10rpx;
	border-radius: 20rpx;
}

.articleShow_action {
	min-height: 200rpx;
	margin: 10rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
}

.articleShow_actionflex {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.popup_style {
	padding: 30rpx;
	display: flex;
	flex-direction: row;
	.popup_buttom {
		background-color: #2e87ff;
		color: #fff;
		width: 40%;
		height: 66rpx;
		font-size: 28rpx;
		line-height: 66rpx;
	}
}

.popup_buttom {
	background-color: #2e87ff;
	color: #fff;
	width: 40%;
	margin: 10rpx aout;
}

.u-page {
	padding: 0;
}

.u-demo-block__title {
	padding: 10px 0 2px 15px;
}

.swipe-action {
	&__content {
		padding: 25rpx 0;

		&__text {
			font-size: 15px;
			color: $u-main-color;
			padding-left: 30rpx;
		}
	}
}
/deep/ .u-swipe-action-item__right__button__wrapper {
	background: red !important;
	display: flex;
	flex-direction: column;
	border-radius: 0rpx 20rpx 20rpx 0 !important;
}
/deep/ .swipe-action__content {
	min-height: 300rpx;
}

/deep/ .uni-list-item__container {
	display: flex;
	align-items: center;
}
/deep/.uni-section .uni-section-header[data-v-5584ec96] {
	padding: 18rpx 0 24rpx 0;
}

/deep/ .u-swipe-action-item__content {
	z-index: 1;
}

/deep/ .u-transition {
	z-index: 10;
}
</style>
